قاعدة @when في CSS: إتقان تطبيق الأنماط الشرطية

عالم CSS يتطور باستمرار، مقدمًا للمطورين طرقًا أكثر قوة ومرونة لتنسيق صفحات الويب. إحدى هذه الميزات التي تكتسب زخمًا هي قاعدة @when، المعروفة أيضًا باسم CSS Conditional Rules Module Level 1. تتيح لك هذه القاعدة تطبيق أنماط CSS بشكل شرطي، بناءً على تحقق شروط معينة. إنها أداة قوية للتصميم المتجاوب، واكتشاف الميزات، وإنشاء أوراق أنماط أكثر قوة وقابلية للتكيف.

ما هي قاعدة @when في CSS؟

قاعدة @when هي قاعدة شرطية (@at-rule) في CSS تسمح لك بتحديد الأنماط التي يتم تطبيقها فقط إذا كانت شروط معينة صحيحة. فكر فيها كأنها جملة if لملفات CSS الخاصة بك. على عكس استعلامات الوسائط (media queries)، التي تركز بشكل أساسي على خصائص منفذ العرض (حجم الشاشة، الاتجاه، إلخ)، توفر @when طريقة أكثر عمومية وقابلية للتوسيع للتعامل مع التنسيق الشرطي. إنها توسع القواعد الشرطية الحالية مثل @supports و @media.

المزايا الرئيسية لاستخدام @when

• تحسين قابلية قراءة الكود: من خلال تغليف المنطق الشرطي داخل كتل @when، فإنك تجعل ملفات CSS الخاصة بك أسهل في الفهم والصيانة. يصبح القصد من وراء تطبيقات الأنماط المحددة أكثر وضوحًا.
• مرونة معززة: يمكن لـ @when التعامل مع شروط أكثر تعقيدًا من استعلامات الوسائط التقليدية، خاصة عند دمجها مع استعلامات الميزات والمنطق المدفوع بـ JavaScript (باستخدام خصائص CSS المخصصة).
• اكتشاف مبسط للميزات: تتكامل @when بسلاسة مع @supports، مما يسمح لك بتطبيق الأنماط فقط عند توفر ميزات متصفح معينة. هذا أمر بالغ الأهمية للتحسين التدريجي.
• تنسيق أكثر دلالية: تسمح @when بتنسيق العناصر بناءً على حالتها أو سياقها، مما يؤدي إلى CSS أكثر دلالية وقابلية للصيانة. على سبيل new_translation: سبيل المثال، تنسيق العناصر بناءً على سمات البيانات أو الخصائص المخصصة التي تم تعيينها بواسطة JavaScript.

صيغة قاعدة @when

            @when <condition> {
  /* CSS rules to apply when the condition is true */
}
            

              
                Copy
              
            
          

يمكن أن يكون <condition> أي تعبير منطقي صالح يتم تقييمه إلى true أو false. غالبًا ما يتضمن هذا التعبير:

• استعلامات الوسائط (Media Queries): شروط تستند إلى خصائص منفذ العرض (مثل عرض الشاشة، اتجاه الجهاز).
• استعلامات الميزات (@supports): شروط تستند إلى دعم المتصفح لميزات CSS معينة.
• الجبر البولياني: دمج شروط متعددة باستخدام العوامل المنطقية (and، or، not).

أمثلة عملية على استخدام @when

1. التصميم المتجاوب مع @when واستعلامات الوسائط

حالة الاستخدام الأكثر شيوعًا لـ @when هي التصميم المتجاوب، حيث تقوم بتعديل الأنماط بناءً على حجم الشاشة. بينما يمكن لاستعلامات الوسائط تحقيق ذلك بمفردها، توفر @when نهجًا أكثر تنظيمًا وقابلية للقراءة، خاصة عند التعامل مع الشروط المعقدة.

            @when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}
            

              
                Copy
              
            
          

في هذا المثال، يتم تطبيق الأنماط داخل كتلة @when فقط عندما يكون عرض الشاشة بين 768 بكسل و 1023 بكسل (حجم الجهاز اللوحي النموذجي). يوفر هذا طريقة واضحة وموجزة لتحديد الأنماط لنطاقات عرض محددة.

ملاحظة حول التدويل: التصميم المتجاوب أمر بالغ الأهمية للجمهور العالمي. ضع في اعتبارك أحجام الشاشات المختلفة عبر المناطق المختلفة. على سبيل المثال، استخدام الهاتف المحمول أعلى في بعض البلدان، مما يجعل التصميم الذي يبدأ بالهاتف المحمول (mobile-first) أكثر أهمية.

2. اكتشاف الميزات مع @when و @supports

يمكن دمج @when مع @supports لتطبيق الأنماط فقط عندما تكون ميزة CSS معينة مدعومة من قبل المتصفح. يتيح لك هذا تحسين موقع الويب الخاص بك بشكل تدريجي، مما يوفر تجربة أفضل للمستخدمين الذين لديهم متصفحات حديثة مع الحفاظ على التوافق مع المتصفحات القديمة.

            @when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback styles for browsers that don't support grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Adjust width for older browsers */
  }
}
            

              
                Copy
              
            
          

هنا، نستخدم @supports للتحقق مما إذا كان المتصفح يدعم CSS Grid Layout. إذا كان يدعمه، فإننا نطبق أنماطًا قائمة على الشبكة (grid) على .container. إذا لم يكن كذلك، فإننا نوفر أنماطًا احتياطية باستخدام flexbox لضمان تحقيق تخطيط مشابه في المتصفحات القديمة.

ملاحظة حول إمكانية الوصول العالمية: اكتشاف الميزات مهم لإمكانية الوصول. قد تفتقر المتصفحات القديمة إلى دعم سمات ARIA الأحدث أو عناصر HTML5 الدلالية. قم بتوفير حلول احتياطية مناسبة لضمان بقاء المحتوى سهل الوصول إليه.

3. دمج استعلامات الوسائط واستعلامات الميزات

تأتي القوة الحقيقية لـ @when من قدرتها على دمج استعلامات الوسائط واستعلامات الميزات لإنشاء قواعد تنسيق شرطية أكثر تعقيدًا ودقة.

            @when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}
            

              
                Copy
              
            
          

في هذا المثال، لن يكون للعنصر .modal خلفية ضبابية إلا عندما يكون عرض الشاشة 768 بكسل على الأقل ويدعم المتصفح خاصية backdrop-filter. يتيح لك هذا إنشاء تأثيرات جذابة بصريًا على المتصفحات الحديثة مع تجنب مشكلات الأداء المحتملة أو أخطاء العرض في المتصفحات القديمة.

4. التنسيق بناءً على الخصائص المخصصة (متغيرات CSS)

يمكن أيضًا استخدام @when بالاقتران مع خصائص CSS المخصصة (المعروفة أيضًا باسم متغيرات CSS) لإنشاء تنسيق ديناميكي ومدفوع بالحالة. يمكنك استخدام JavaScript لتحديث قيمة خاصية مخصصة، ثم استخدام @when لتطبيق أنماط مختلفة بناءً على تلك القيمة.

أولاً، حدد خاصية مخصصة:

            :root {
  --theme-color: #007bff; /* Default theme color */
  --is-dark-mode: false;
}

            

              
                Copy
              
            
          

ثم، استخدم @when لتطبيق الأنماط بناءً على قيمة الخاصية المخصصة:

            @when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

            

              
                Copy
              
            
          

أخيرًا، استخدم JavaScript لتبديل قيمة الخاصية المخصصة --is-dark-mode:

            document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});
            

              
                Copy
              
            
          

يسمح هذا للمستخدمين بالتبديل بين السمات الفاتحة والداكنة، مع تحديث CSS ديناميكيًا بناءً على قيمة الخاصية المخصصة. لاحظ أن المقارنة المباشرة لمتغيرات CSS في @when قد لا تكون مدعومة عالميًا عبر المتصفحات. بدلاً من ذلك، قد تحتاج إلى استخدام حل بديل مع استعلام وسائط يتحقق من قيمة غير صفرية:

            @when ( --is-dark-mode > 0 ) { ... }
            

              
                Copy
              
            
          

ومع ذلك، تأكد من أن الخاصية المخصصة لها قيمة رقمية حتى تعمل هذه الطريقة بشكل صحيح.

ملاحظة حول إمكانية الوصول: يعد توفير سمات بديلة (مثل الوضع الداكن) أمرًا بالغ الأهمية لإمكانية الوصول. قد يستفيد المستخدمون الذين يعانون من إعاقات بصرية من السمات عالية التباين. تأكد من أن مفتاح تبديل السمة الخاص بك يمكن الوصول إليه عبر لوحة المفاتيح وقارئات الشاشة.

5. التنسيق بناءً على سمات البيانات (Data Attributes)

يمكنك أيضًا استخدام @when مع سمات البيانات لتنسيق العناصر بناءً على قيم بياناتها. يمكن أن يكون هذا مفيدًا لإنشاء واجهات ديناميكية حيث يتغير مظهر العناصر بناءً على تفاعل المستخدم أو تحديثات البيانات.

على سبيل المثال، لنفترض أن لديك قائمة مهام، ولكل مهمة سمة data-status تشير إلى حالتها (مثل، "todo", "in-progress", "completed"). يمكنك استخدام @when لتنسيق كل مهمة بشكل مختلف بناءً على حالتها.

            [data-status="todo"] {
  /* Default styles for todo tasks */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}
            

              
                Copy
              
            
          

ملاحظة: قد يكون دعم شرط اختبار attribute() محدودًا أو غير مطبق بالكامل في جميع المتصفحات حاليًا. اختبر دائمًا بشكل شامل.

توافق المتصفحات والـ Polyfills

حتى أواخر عام 2024، لا يزال دعم المتصفحات لقاعدة @when في تطور. بينما تدعم العديد من المتصفحات الحديثة الوظائف الأساسية، قد لا تدعمها بعض المتصفحات القديمة. لذلك، من الأهمية بمكان التحقق من جداول التوافق واستخدام حلول احتياطية مناسبة أو polyfills عند الضرورة.

استشر دائمًا موارد مثل Can I use... للتحقق من حالة دعم المتصفح الحالية لـ @when والميزات ذات الصلة.

أفضل الممارسات لاستخدام @when

• اجعل الشروط بسيطة: تجنب الشروط المعقدة بشكل مفرط داخل كتل @when. قم بتقسيم المنطق المعقد إلى أجزاء أصغر وأكثر قابلية للإدارة.
• وفر حلولاً احتياطية: وفر دائمًا أنماطًا احتياطية للمتصفحات التي لا تدعم الميزات التي تستخدمها في قواعد @when الخاصة بك. هذا يضمن تجربة متسقة عبر المتصفحات المختلفة.
• اختبر بشكل شامل: اختبر CSS الخاص بك في مجموعة متنوعة من المتصفحات والأجهزة للتأكد من أن قواعد @when تعمل كما هو متوقع.
• استخدم تعليقات ذات معنى: أضف تعليقات إلى CSS الخاص بك لشرح الغرض من كل قاعدة @when والشروط التي تستند إليها. سيجعل هذا الكود الخاص بك أسهل في الفهم والصيانة.
• ضع في اعتبارك الأداء: تجنب استخدام قواعد @when بشكل مفرط، حيث يمكن أن تؤثر على الأداء. قم بتحسين CSS الخاص بك لتقليل عدد القواعد التي يجب تقييمها.

الخاتمة

تعد قاعدة @when إضافة قوية إلى مجموعة أدوات CSS، حيث توفر للمطورين طريقة أكثر مرونة وتعبيرية لتطبيق الأنماط بشكل شرطي. من خلال دمجها مع استعلامات الوسائط، واستعلامات الميزات، وخصائص CSS المخصصة، يمكنك إنشاء أوراق أنماط أكثر قوة وقابلية للتكيف والصيانة. على الرغم من أن دعم المتصفحات لا يزال في تطور، إلا أن @when هي ميزة تستحق الاستكشاف ودمجها في سير عمل تطوير الويب الحديث الخاص بك.

مع استمرار تطور الويب، سيكون إتقان ميزات مثل @when ضروريًا لإنشاء تجارب جذابة وسهلة الوصول وعالية الأداء للمستخدمين في جميع أنحاء العالم. احتضن قوة التنسيق الشرطي وافتح إمكانيات جديدة في تطوير CSS الخاص بك.